import ScrollBarLayout from '@/components/ScrollBarLayout';
import { useContext, useEffect } from 'react';
import { SupplierLocaldataContext } from '../common';
import { Empty, Table, Timeline } from 'antd';
import MyIcon from '@/components/MyIcon';
import cls from 'classnames';
import { UpCircleOutlined, DownCircleOutlined } from '@ant-design/icons';
import { modifyTableColumns } from '@/utils/myutilConfig';

// const changeList: Record<string, any>[] = [
//   {
//     id: '111',
//     modifyTime: '2022-04-06 15:55:06',
//     modifyerName: '王路',
//     modifyPositionName: '产品销售',
//     modifyDepartmentName: '信息采集部',
//     modifyCompanyName: '东方科技有限公司',
//     modifyJson: [
//       {
//         fieldName: '供应商名称',
//         oldValue: '新世界智能科技公司',
//         newValue: '新世界科技有限公司',
//         id: '333',
//       },
//       {
//         fieldName: '供应商简称',
//         oldValue: '新世界智能',
//         newValue: '新世界科技',
//         id: '4444',
//       },
//       {
//         fieldName: '认证状态',
//         oldValue: '潜在',
//         newValue: '合格',
//         id: '555',
//       },
//       {
//         fieldName: '企业类型',
//         oldValue: '合资',
//         newValue: '独有',
//         id: '666',
//       },
//       {
//         fieldName: '企业规模',
//         oldValue: '10~30人',
//         newValue: '30~50人',
//         id: '777',
//       },
//       {
//         fieldName: '供货分类',
//         oldValue: '批量供货',
//         newValue: '按需供货',
//         id: '888',
//       },
//       {
//         fieldName: '物料类型',
//         oldValue: '原材料',
//         newValue: '耗材',
//         id: '999',
//       },
//     ],
//   },
//   {
//     id: '2222',
//     modifyTime: '2022-04-06 15:59:59',
//     modifyerName: '小樱',
//     modifyPositionName: '产品销售',
//     modifyDepartmentName: '信息采集部',
//     modifyCompanyName: '东方科技有限公司',
//     modifyJson: [
//       {
//         fieldName: '法人代表',
//         oldValue: '王伟',
//         newValue: '郭达',
//         id: 'aaa',
//       },
//       {
//         fieldName: '是否一般纳税人',
//         oldValue: '否',
//         newValue: '是',
//         id: 'bbb',
//       },
//       {
//         fieldName: '是否年检',
//         oldValue: '否',
//         newValue: '是',
//         id: 'ccc',
//       },
//       {
//         fieldName: '开户行名称',
//         oldValue: '中国银行',
//         newValue: '浦发银行',
//         id: 'ddd',
//       },
//     ],
//   },
// ];

export const DetailViewLeftChangeInfo: React.FC<SupplierManageAPI.IDetailViewLeftChangeInfo> = ({
  allOpenChildren,
  changeOpenChildren,
  clickOpenClose,
}) => {
  /** 获取上下文 */
  const { updateFixCls, supplierInfoObj } = useContext(SupplierLocaldataContext);

  /** 初始化 */
  useEffect(() => {
    if (supplierInfoObj?.msupplierModifies?.length > 0 && allOpenChildren?.openIdKey?.length == 0) {
      const allOpenIDList: string[] = supplierInfoObj?.msupplierModifies?.map((item: any) => item?.id);
      const changeOpenObj = {
        allOpenKeys: allOpenIDList,
        openIdKey: [allOpenIDList?.[0]],
      };
      changeOpenChildren(changeOpenObj);
    }
  }, [supplierInfoObj?.msupplierModifies]);

  return (
    <div className={'commonTabsBodyDom'}>
      {supplierInfoObj?.msupplierModifies?.length > 0 ? (
        <ScrollBarLayout style={{ margin: '5px 0px' }}>
          <div className={updateFixCls + 'memoirTimelineSty'}>
            <Timeline>
              {supplierInfoObj?.msupplierModifies?.map((item: any, index: number) => {
                return (
                  <Timeline.Item key={`${item?.id}-${index}`} dot={<MyIcon style={{ fontSize: 18 }} type="icon-time-circle" />}>
                    <div
                      style={{
                        margin: '5px 0px',
                      }}
                    >
                      【
                      <span className={updateFixCls + 'memoirTimelineSty-titleUserBoxSty'}>
                        {item.modifyDepartmentName || '--'}
                      </span>
                      】—【
                      <span className={updateFixCls + 'memoirTimelineSty-titleUserBoxSty'}>{item.modifyerName || '--'}</span>
                      】于&nbsp;
                      <span className={updateFixCls + 'memoirTimelineSty-titleTimeBoxSty'}>{item?.modifyTime || '--'}</span>
                      &nbsp;变更，变更记录如下：
                      <a
                        onClick={() => {
                          clickOpenClose(item?.id, allOpenChildren);
                        }}
                      >
                        {allOpenChildren?.openIdKey?.includes(item?.id) ? <UpCircleOutlined /> : <DownCircleOutlined />}
                      </a>
                    </div>
                    {allOpenChildren?.openIdKey?.includes(item?.id) && (
                      <div className={cls(updateFixCls + 'memoirTimelineSty-changeBodyBox', 'listTable-zIndexStyle')}>
                        <Table
                          columns={modifyTableColumns}
                          size="small"
                          bordered
                          dataSource={item?.modifyJson}
                          pagination={false}
                          rowKey={'id'}
                        />
                      </div>
                    )}
                  </Timeline.Item>
                );
              })}
            </Timeline>
          </div>
        </ScrollBarLayout>
      ) : (
        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />
      )}
    </div>
  );
};
